import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:ulearning_app/common/global_loader/global_loader.dart';
import 'package:ulearning_app/common/utils/app_colors.dart';
import 'package:ulearning_app/common/widgets/app_bar.dart';
import 'package:ulearning_app/common/widgets/app_text_fields.dart';
import 'package:ulearning_app/common/widgets/button_widgets.dart';
import 'package:ulearning_app/common/widgets/text_widgets.dart';
import 'package:ulearning_app/pages/sign_up/notifier/register_notifier.dart';
import 'package:ulearning_app/pages/sign_up/sign_up_controller.dart';

// 消费者widget，用于注册页面
class SignUp extends ConsumerStatefulWidget {
  const SignUp({super.key});

  @override
  ConsumerState<SignUp> createState() => _SignUpState();
}

class _SignUpState extends ConsumerState<SignUp> {
  late SignUpController _controller; // 注册控制器
  @override
  void initState() {
    _controller = SignUpController(ref: ref); // 初始化注册控制器
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // 这里的ref是通过Provider.of获取的，用于获取Provider中的数据
    final regProvider = ref.watch(registerNotifierProvider); // 获取注册状态提供者
    final loader = ref.watch(appLoaderProvider); // 获取加载状态提供者
    return SafeArea(
        child: Scaffold(
      appBar: buildAppBar(title: "注册"),
      backgroundColor: Colors.white,
      body: loader == false
          ? SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 40.h),
                  Center(child: text14Normal(text: "请填写注册信息")),
                  SizedBox(height: 20.h),
                  appTextField(
                    text: "账号",
                    iconName: "assets/icons/user.png",
                    hintText: '请输入账号',
                    obscureText: false,
                    func: (value) => ref
                        .read(registerNotifierProvider.notifier)
                        .onUserChange(value), // 输入账号的回调函数
                  ),
                  SizedBox(height: 20.h),
                  appTextField(
                    text: "邮箱",
                    iconName: "assets/icons/user.png",
                    hintText: '请输入邮箱',
                    obscureText: false,
                    func: (value) => ref
                        .read(registerNotifierProvider.notifier)
                        .onEmailChange(value), // 输入邮箱的回调函数
                  ),
                  SizedBox(height: 20.h),
                  appTextField(
                    text: "密码",
                    hintText: '请输入密码',
                    iconName: 'assets/icons/lock.png',
                    obscureText: true,
                    func: (value) => ref
                        .read(registerNotifierProvider.notifier)
                        .onPasswordChange(value), // 输入密码的回调函数
                  ),
                  SizedBox(height: 20.h),
                  appTextField(
                    text: "确认密码",
                    hintText: '请输入确认密码',
                    iconName: 'assets/icons/lock.png',
                    obscureText: true,
                    func: (value) => ref
                        .read(registerNotifierProvider.notifier)
                        .onConfirmPasswordChange(value), // 输入确认密码的回调函数
                  ),
                  SizedBox(height: 20.h),
                  // 忘记密码
                  Container(
                    margin: EdgeInsets.only(left: 25.w),
                    child: text14Normal(text: "同意协议"),
                  ),
                  SizedBox(height: 50.h),
                  // 注册按钮
                  Center(
                    child: appBtn(
                      text: '注册',
                      isLogin: true,
                      func: _controller.handleSignUp, // 注册按钮的回调函数
                    ),
                  )
                ],
              ),
            )
          : const Center(
              child: CircularProgressIndicator(
                backgroundColor: Colors.blue,
                color: AppColors.primaryElement,
              ), // 显示加载动画
            ),
    ));
  }
}
